<template>
  <div>
    <!-- header  -->
    <section class="w-full bg-[#fff] sticky top-0 z-99">
      <div class="layout-c h-70px <md:h-130px flex flex-wrap align-center justify-between bg-[#fff]">
        <h1 class="text-2xl text-[#156ACE] pointer" @click="tabClick(0)">铅迹危废监管系统</h1>

        <div class="flex justify-between align-center <md:w-1/1 w-1/3 font-xl text-lg my-20px">
          <span class="pointer hover:text-[#156ACE]" :class="{ active: currIndex === 0 }" @click="tabClick(0)"
            >网站首页</span
          >
          <span class="pointer hover:text-[#156ACE]" :class="{ active: currIndex === 1 }" @click="tabClick(1)"
            >关于我们</span
          >
          <span
            class="pointer hover:text-[#156ACE] hover:border-[#156ACE] border border-[#333] rounded-3xl py-0 px-10px text-[#333]"
            @click="scrollIntoViewFn('#qr')"
          >
            下载APP
          </span>
        </div>
      </div>
    </section>

    <!-- 用于滚动到顶部的锚点 -->
    <div id="top_anchor" class="h-150px -mt-150px"></div>
    <!-- 关于我们  -->
    <template v-if="currIndex === 1">
      <section class="w-full h-500px building"></section>
      <section class="layout-c leading-10">
        <h2 class="my-50px font-bold text-2xl">关于我们</h2>
        <p class="indent-lg">
          安徽快点科技有限责任公司成立于2015年，是国内领先的铅酸和锂电绿色能源集成服务供应商。公司致力于动力应用、循环再生等新能源绿色管理系统开发与应用，是目前国内危废资质最多、收储体量最大、专业性最强、信息管理系统最完善的综合性动力电池回收企业。
        </p>
        <p class="indent-lg">
          快点科技是循环再生领域“互联网+”的先行者，公司依托自主开发的供应链管理平台，结合物联网技术应用，促进产业链全流程的高效运转，实现了从产品到产废再到处置再生的全生命周期闭环管理。有利于更高效的资源化配置，更科学的规范化管理。
        </p>

        <h2 class="my-50px font-bold text-2xl">关于我们</h2>
        <p class="indent-lg">
          《全国固体废物和化学品管理信息系统》的全面推广，将从行业发展和行政指引方面为从业企业有效推行供应链系统管理，实现信息化管理从无到有、企业管理从无序到有序、从粗放到精细的升华，为危废品源头管控带来强有力的促进作用。
        </p>

        <p class="indent-lg mb-50px">
          在各级行业主管部门的领导下，快点科技将持续完善回收体系建设工作，坚决贯彻执行国家各项环保政策要求，全面推行供应链系统管理，力争做到让所有危废物以合法的渠道回收，实现全流程溯源的监管。
        </p>
      </section>
    </template>

    <!-- 网站首页 -->
    <template v-if="currIndex === 0">
      <!-- boardcast -->
      <section class="w-full bg-[#0a3d6c]">
        <div class="layout-c h-500px flex boardcast flex-col-reverse relative overflow-hidden">
          <div class="left h-1/2 w-1/2 <md:w-1/1 flex flex-wrap relative z-2">
            <div class="w-1/2 pl-30px text-white item">生态监管</div>
            <div class="w-1/2 pl-30px text-white item">信息溯源</div>
            <div class="w-1/2 pl-30px text-white item">数据共享</div>
            <div class="w-1/2 pl-30px text-white item">节点可控</div>
          </div>
          <img src="~@/assets/imgs/earth.png" class="absolute right-0 -top-10px z-1 opacity-50" alt="" />
        </div>
      </section>

      <!-- third  -->
      <section class="layout-c third flex flex-wrap justify-center">
        <div class="<md:w-1/1 md:w-1/2 lg:w-1/3 flex flex-col align-center">
          <img src="~@/assets/imgs/third-11.png" class="w-1/4 h-fit" alt="" />
          <h4 class="font-bold mt-5 mb-3">产废源</h4>
          <div class="font-base text-sm mb-30px">源头管控、来源可查、去向可追</div>
        </div>
        <div class="<md:w-1/1 md:w-1/2 lg:w-1/3 flex flex-col align-center">
          <div class="w-4/5 flex justify-center">
            <img src="~@/assets/imgs/third-22.png" class="w-1/4 h-fit" alt="" />
          </div>
          <h4 class="font-bold mt-5 mb-3">回收企业</h4>
          <div class="font-base text-sm mb-30px">规范化、来源合法化、可溯化</div>
        </div>
        <div class="<md:w-1/1 md:w-1/2 lg:w-1/3 flex flex-col align-center">
          <img src="~@/assets/imgs/third-33.png" class="w-1/4 h-fit" alt="" />
          <h4 class="font-bold mt-5 mb-3">监管</h4>
          <div class="font-base text-sm mb-30px">便捷、安全、有效</div>
        </div>
      </section>

      <!-- forth  -->
      <section class="forth w-full bg-[#3890c0]">
        <div class="layout-c text-center">
          <img src="~@/assets/imgs/forth-1.png" alt="..." />
          <div class="text-[#fff] mb-30px">
            从社会源进行数据采集，利用溯源技术，实现对固废全流程监管，形成大数据采集汇总，为监管部门提供有效数据支撑
          </div>
        </div>
      </section>

      <!-- fifth -->
      <section class="layout-c flex flex-wrap justify-center">
        <div class="<md:w-1/1 md:w-1/2 min-h-400px flex justify-center align-center p-1/20">
          <img src="~@/assets/imgs/fifth.png" alt="..." />
        </div>
        <div class="<md:w-1/1 md:w-1/2 p-1/20">
          <h5 class="font-bold">产废源</h5>
          <p class="mt-2 mb-4">支持用户对新增固废、现有贮存，往期转移记录的数据查询</p>

          <h5 class="font-bold">物流人员</h5>
          <p class="mt-2 mb-4">支持查询物流人员的隶属企业、实名信息、车辆信息、现有在途固废数据，往期接收及转移数据</p>

          <h5 class="font-bold">回收企业</h5>
          <p class="mt-2 mb-4">
            查询企业基本信息，支持对出入库、调拨盘点、月季年度报表、联单，库存报表统计等查询，并对物流人员进行审核管理
          </p>
        </div>
      </section>

      <!-- sixth -->
      <section class="sixth layout-c flex flex-wrap justify-center overflow-hidden">
        <div class="<md:w-1/1 md:w-2/7 min-h-400px flex justify-center align-center">
          <img src="~@/assets/imgs/sixth-1.png" alt="..." />
        </div>
        <div class="<md:w-1/1 md:w-3/7 p-1/14 relative z-9">
          <h5 class="font-bold">铅迹产废源端</h5>
          <p class="mt-2 mb-4">实名认证，社会源产废登记汇总及转移明细、发布转移申请，形成第一张“电子台账”</p>
        </div>
        <div class="<md:w-1/1 md:w-2/7 flex items-end">
          <img src="~@/assets/imgs/sixth-2.png" class="right-img" alt="..." />
        </div>
      </section>

      <section class="layout-c">
        <div class="text-center p-50px">
          <h5 class="font-bold m-20px">铅迹物流端</h5>
          <p>回收人员、车辆、货品来源、回收量可随时查询、监管</p>
        </div>
      </section>

      <!-- seventh -->
      <section class="layout-c">
        <div class="h-500px">
          <img src="~@/assets/imgs/seventh-1.png" class="max-w-full max-h-full my-0 mx-auto" alt="..." />
        </div>
      </section>
    </template>

    <!-- footer -->
    <section class="bg-[#333] text-[#fff]">
      <div class="layout-c flex flex-wrap justify-between">
        <div class="py-30px flex <md:w-1/1 flex-col justify-around">
          <p>公司全称 : 安徽快点科技股份有限公司</p>
          <p>全国统一服务热线 : 4000-176-1760</p>
          <p>总部地址 : 安徽合肥市高新区望江西路800号创新创业园C3栋8楼</p>
        </div>

        <!-- id 用于滚动到底部的锚点 -->
        <div class="py-30px <md:w-1/1" id="qr">
          <div>关于我们</div>
          <div class="flex">
            <div class="mr-10px">
              <img src="~@/assets/imgs/shop_qr.png" class="mx-auto my-10px w-100px" alt="" />
              <p class="text-sm">铅迹产废源端APP下载</p>
            </div>
            <div class="ml-10px">
              <img src="~@/assets/imgs/driver_qr.png" class="mx-auto my-10px w-100px" alt="" />
              <p class="text-sm">铅迹物流端APP下载</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-[#1e1e1e] text-[#fff] text-sm text-center py-15px">
      <div class="layou-c h-50px flex flex-col justify-around">
        <p>Copyright © 2018-2023版权所有</p>
        <p>Kood Power Technology Group co.,LTD</p>
      </div>
    </section>

    <div
      class="scroll-top pointer fixed bottom-50px right-40px w-40px h-40px rounded-xl text-white text-center flex align-center justify-center bg-[#93bffa] opacity-80"
      v-show="innerHeight < scrollTop"
      @click="scrollIntoViewFn('#top_anchor')"
    >
      UP
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      currIndex: 0,
      scrollTop: 0,
      innerHeight: 0,
    }
  },
  mounted() {
    this.innerHeight = window.innerHeight
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 头部tab点击
    tabClick(i) {
      this.currIndex = i
      // 滚动到顶事件
      this.scrollIntoViewFn('#top_anchor')
    },

    // 页面滚动事件, 用于记录滚动高度
    handleScroll() {
      this.scrollTop = window.scrollY
      // console.log('window.scrollY: ', window.scrollY)
    },

    scrollIntoViewFn(target) {
      const element = document.querySelector(target)
      // element.scrollIntoView(); // 无滚动效果
      element.scrollIntoView({
        // 添加对象，有滚动效果
        behavior: 'smooth',
        block: 'start',
        inline: 'start',
      })
    },
  },
}
</script>

<style>
/* 使滚动润滑 */
body,
html {
  scroll-behavior: smooth;
}
</style>
<style lang="scss" scoped>
.active {
  color: #156ace;
}
.layout-c {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
  // border: 1px solid #eee;
}
.boardcast {
  &::before {
    content: url(~@/assets/imgs/car.svg);
    position: absolute;
    top: 30px;
    left: 150px;
  }
  &::after {
    content: url(~@/assets/imgs/line.svg);
    position: absolute;
    top: 70px;
    left: 100px;
  }
  // background: url(~@/assets/imgs/car.svg) no-repeat right center;
  // background-size: auto 110%;
  .item {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 40px;
      width: 30px;
      height: 140px;
      transform: translate(-45px, -70px) rotate(90deg);
      background: url(~@/assets/imgs/u11.svg) no-repeat right center;
    }
    &:nth-child(2n)::after {
      transform: translate(-55px, -84px) rotate(-80deg);
    }
  }
}
.third {
  margin: 50px auto;
}
.forth img {
  max-height: 400px;
  max-width: 90%;
  margin: 20px auto;
}
.sixth .right-img {
  height: 100%;
  overflow: visible;
  object-fit: cover;
  opacity: 0.6;
}
.building {
  background: url(~@/assets/imgs/about.jpg) no-repeat center center;
  background-size: cover;
}
</style>
